<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/styles/layui.css" media="all">
    <link rel="stylesheet" href="/styles/common.css"/>
    <script type="text/javascript" src="/styles/js/sockjs.min.js"></script>
    <script type="text/javascript" src="/styles/js/adapter.js"></script>
    <script type="text/javascript" src="/styles/js/jquery-1.7.2.js"></script>


</head>
<body>
<#include "top.ftl">
<div class="page-body">
    <#include "leftmenu.ftl">
    <div class="page-content">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>·视频·</legend>
        </fieldset>

        <div id="videobox" style="position: relative">
            <div style="height: 400px;width: 200px;transform: rotate(90deg); position: absolute;left: 120px;top: -100px">
                <video autoplay id="me" style="height: 100%;width: 100%;"></video>
                <canvas id="output" style="display:none"></canvas>
            </div>
            <div style="transform: rotate(90deg);height: 400px;width: 200px; position: absolute;left: 520px;top: -100px">
                <img style="height: 100%;width: 100%;" src="" class="you"/>
            </div>
        </div>

    </div>

</div>

<#--<script src="/styles/js/index.js"></script>-->

<script>
    var interval;
    var webSocket;
    var i =0;
    var l = "520px";
    // var web;
    var backContext = output.getContext("2d");
    setTimeout(init, 1000);

    function init() {
        webSocket = new WebSocket("ws://10.96.150.224:8082/onlineServer");
        // web = new WebSocket("ws://10.96.150.122:8081/onlineServer");

        // web.onopen=function(){
        //     console.log("webOpen")
        // }
        webSocket.onopen = onOpen;
        webSocket.onmessage = onMessage;
        // web.onerror = function(){
        //     console.log("你错了")
        // }
        webSocket.onerror = function () {
            console.log("我错了")
        }
        webSocket.onclose = onClose;
    }


    function onMessage(info) {

        console.log(info);

        // console.log(JSON.parse(info.data).nameid);
        // console.log($("#you" + JSON.parse(info.data).nameid));
        if($("#you" + JSON.parse(info.data).nameid).length == 1){
            $("#you" + JSON.parse(info.data).nameid).children("img").attr('src',JSON.parse(info.data).img);
        }else{

            // console.log($("#videobox").children().eq(1));//获取要复制的节点
            var sourceDiv = $("#videobox").children().eq(1);//获取要复制的节点
            var duplicate = sourceDiv.clone(true);
            console.log(duplicate.css('left'));
            duplicate.attr('id','you'+JSON.parse(info.data).nameid);
            console.log(duplicate.attr('id'));

            if(l==="120px"){
                l = "520px";
            }else{
                l = "120px";
            }
            var t = Math.floor(i/2)+1;
            // console.log(t);
            duplicate.css('left',l);
            // console.log(duplicate.css('left'));
            duplicate.css('top',(t*200-100+10)+"px");
            // console.log(duplicate.css('top'));
            // console.log(duplicate.children("img"));
            console.log(JSON.parse(info.data).img);
            console.log(duplicate.children("img"));
            duplicate.children("img").attr('src',JSON.parse(info.data).img);
            duplicate.insertAfter(sourceDiv);
            i++;
        }
        // if($("#"+info.data().nameid))
        // var sourceDiv = $("#videobox").children().find(1);//获取要复制的节点
        // var duplicate = sourceDiv.clone(true);
        // duplicate.insertAfter(sourceDiv);
        // Array.prototype.slice.call($(".you")).forEach(function (i) {
        //     if(i.id == info.data().nameid){
        //         $("#"+info.data().nameid).src = info.data().img;
        //     }
        // })
    }


    function onOpen() {
        clearInterval(interval);
        console.log("websocket")
        interval = setInterval(function () {
            draw()
        }, 16)
        draw();
    }

    function onClose() {

        init();
    }

    function draw() {
        backContext.drawImage(me, 0, 0, 300, 150);
        //将视频图像缩放
        webSocket.send(JSON.stringify({nameid:${Session["currentuser"].employeeid},
                                       img:output.toDataURL("image/jpeg", 0.5)}))
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia;
    console.log(navigator.getUserMedia);
    navigator.getUserMedia({video: true, audio: false}, function (stream) {
        me.srcObject = stream;
    }, console.log);


    <#--$(function(){-->
    <#--    webos.execute({-->
    <#--        name:"${currentuser.employeename}",-->
    <#--        room:"111"-->
    <#--    });-->
    <#--})-->
</script>

</body>
</html>